【CSS】align-items - コンテナーアイテムの交差軸配置
CSSのalign-itemsプロパティについて解説します。
検証環境
align-items
align-itemsは“フレックスコンテナー・グリッドコンテナーのアイテム(子要素)の交差軸配置”のプロパティです。
基本構文
align-items: 値;
値
代表的な値は次の通りです。
値 | 意味 |
---|---|
start | 先頭側に寄せる。 |
end | 末尾側に寄せる。 |
center | 中央に寄せる。 |
stretch | 行の高さと同じになるように拡張 |
サンプル
start
<style>
div {
display: flex;
background: lightgray;
height: 300px;
flex-wrap: wrap;
___ih_hl_start
align-items: start;
___ih_hl_end
}
p {
border: 1px solid black;
text-align: center;
width: 40%;
}
</style>
<div>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>WebBrowser</p>
<p>Server</p>
</div>
end
<style>
div {
display: flex;
background: lightgray;
height: 300px;
flex-wrap: wrap;
___ih_hl_start
align-items: end;
___ih_hl_end
}
p {
border: 1px solid black;
text-align: center;
width: 40%;
}
</style>
<div>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>WebBrowser</p>
<p>Server</p>
</div>
center
<style>
div {
display: flex;
background: lightgray;
height: 300px;
flex-wrap: wrap;
___ih_hl_start
align-items: center;
___ih_hl_end
}
p {
border: 1px solid black;
text-align: center;
width: 40%;
}
</style>
<div>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>WebBrowser</p>
<p>Server</p>
</div>
stretch
<style>
div {
display: flex;
background: lightgray;
height: 300px;
flex-wrap: wrap;
___ih_hl_start
align-items: stretch;
___ih_hl_end
}
p {
border: 1px solid black;
text-align: center;
width: 40%;
}
</style>
<div>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>WebBrowser</p>
<p>Server</p>
</div>